// /*

// 所有构建工具都是基于nodejs 平台运行   模块采用 cjs
//  npm/cnpm install -D xxxxx@3.2.0 安装本地指定版本
//  npx  执行

//  开发环境： 能让代码运行
//  optimize-css-assets-webpack-plugin  压缩css
//  生产环境："UglifyJsPlugin"  自动压缩代码

// */

// // resolve 用来拼接绝对路径的方法
// // __driname nodejs变量 代表当前文件的目录的绝对路径

// const { resolve } = require('path')
// const HtmlWebpackPlugin = require('html-webpack-plugin')
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// const OptimizeCssAssetsWepckPlugin = require('optimize-css-assets-webpack-plugin')
// //  设置环境变量
// // process.env.NODE_ENV = 'development'

// module.exports = {
//   entry: './src/js/index.js',
//   output: {
//     filename: 'js/built.js',
//     path: resolve(__dirname, 'build'),
//   },
//   stats: { children: false },
//   module: {
//     rules: [
//       // loader 配置
//       {
//         test: /\.css$/,
//         use: [
//           // 执行顺序  右 → 左 下→上
//           // 创建style标签，将js的样式资源导入head中
//           // 'style-loader',
//           // 取代style-loader → 提取css 单独文件
//           MiniCssExtractPlugin.loader,
//           // 将css文件编译成cjs模块加载到js中。里面的样式是字符串
//           'css-loader',

//           /*
//            css 兼容性处理  → postcss => postcss-loader postcss-preset-env
//            帮postcss 找到package.json borwserslist中的配置，加载指定的css兼容性样式

//           默认生产环境   → 设置环境变量 process.env.NODE_ENV
//           //"development": [
//           //   "last 1 chrome version",
//           //   "last 1 firefox version",
//           //   "last 1 safari version"
//           // ],
//           // "production": [
//           //   ">0.2$",
//           //   "not dead",
//           //   "not op_mini all"
//           // ]
//           */

//           // 1.  loader默认配置  “postcss-loader”
//           // 2.  修改 loader的配置
//           {
//             loader: 'postcss-loader',
//             options: {
//               ident: 'postcss',
//               plugin: () => {
//                 require('postcss-preset-env')()
//               },
//             },
//           },
//         ],
//       },
//       {
//         test: /\.less$/,
//         use: [
//           'style-loader',
//           // MiniCssExtractPlugin.loader,
//           'css-loader',
//           'less-loader',
//         ],
//       },
//       {
//         // 处理图片资源 但是处理不了Html-img图片
//         test: /\.(jpg|png|gif)$/,
//         loader: 'url-loader', //(file-loader)
//         options: {
//           // 图片小于8kb 会base64 处理
//           limit: 4 * 1024,
//           // url-loader 默认使用es6模块化解析，而html-loader 引入的图片是cjs
//           // 致图片解析时出现 src="[object Module]"
//           //  关闭es6模块化，使用cjs
//           esModule: false,
//           // [hash:10]  取hash 前十位
//           // [ext] 取文件扩展名
//           name: '[hash:10].[ext]',
//           outputPath: 'imgs',
//         },
//       },
//       {
//         // 处理图片资源 但是处理不了HTml-img图片
//         test: /\.html$/,
//         loader: 'html-loader', //(file-loader)
//       },
//       {
//         test: /\.(ttf|woff|eot|svg)$/,
//         use: [
//           {
//             loader: 'file-loader',
//             options: {
//               outputPath: 'font',
//               name: '[hash:10].[ext]',
//             },
//           },
//         ],
//       },
//       // {
//       //   // 处理其他资源 (排除 html.js.css...等等)
//       //   exclude: /\.(css|js|html|png|less) $/,
//       //   loader: 'file-loader', //(file-loader)
//       //   options: {
//       //     // [hash:10]  取hash 前十位
//       //     // [ext] 取文件扩展名
//       //     name: '[hash:10].[ext]',
//       //     outputPath: 'media',
//       //   },
//       // },
//       /*
//       语法检查  eslint-loader
//       只检测用户编写代码
//       检查规则：package.js  中 eslintConfig 设置

//       airbnb -->  eslint-config-airbnb-base eslint-plugin-import eslint
//       */
//       {
//         test: /\.js$/,
//         exclude: /node_modules/,
//         loader: 'eslint-loader',
//         options: {
//           // 自动修复
//           fix: true,
//         },
//       },

//       /*
//       js 兼容性处理 ：babel-loader  @babel/core
//       1.基础js  @babel/preset-env
//       2.全部js 兼容性处理  → import "@babel/polyfill"   所有兼容性代码，造成体积太大
//       3.按需加载兼容处理  core-js

//       */
//       {
//         test: /\.js$/,
//         exclude: /node_modules/,
//         loader: 'babel-loader',
//         options: {
//           presets: [
//             [
//               '@babel/preset-env',
//               {
//                 // 按需加载
//                 useBuiltIns: 'usage',
//                 // 指定core-js版本
//                 corejs: {
//                   version: 3,
//                 },
//                 // 指定兼容性做到那个版本浏览器
//                 targets: {
//                   chrome: '60',
//                   firefox: '60',
//                   ie: '9',
//                   safari: '10',
//                   edge: '17',
//                 },
//               },
//             ],
//           ],
//         },
//       },
//     ],
//   },
//   plugins: [
//     // html-webpack-Plugin  打包html插件
//     // 默认创建一个空的HTML,自动引入打包输出的所有资源
//     new HtmlWebpackPlugin({
//       template: './src/index.html',
//       // 压缩HTMl代码
//       minify: {
//         // 移除空格
//         collapseWhitespace: true,
//         // 移除注释
//         removeCommentsL: true,
//       },
//     }),

//     // cnpm i mini-css-extract-plugin -D
//     // 提取css
//     new MiniCssExtractPlugin({
//       filename: 'css/built.css',
//     }),

//     new OptimizeCssAssetsWepckPlugin(),
//   ],
//   mode: 'development',
//   // mode: 'production',

//   //  开发服务器 devServer  实时刷新
//   // 特点： 只会在内存中编译打包，不会有任何输出
//   // !!!报错 无法启动且直接运行npx 则全局本地安装一下webpack
//   // 启动 → npx webpack-dev-server
//   devServer: {
//     contentBase: resolve(__dirname, 'build'),
//     //启动 gzip 压缩
//     compress: true,
//     port: 3000,
//     open: true,
//   },
// }
/**
 *
 *  生产环境下
 *
 */
const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 设置环境变量 处理 package.json 中borwserslist 配置
// process.env.NODE_ENV = 'production'

// const commonCssLoader = [
//   // less/css 公用处理loade
//   {
//     loader: MiniCssExtractPlugin.loader,
//     options: {
//       publicPath: '../',
//     },
//   },
//   'css-loader',
//   {
//     loader: 'postcss-loader',
//     options: {
//       ident: 'postcss',
//       // plugin: [require('postcss-preset-env')],
//       plugins: () => [
//         //css兼容性打包
//         require('postcss-preset-env')(),
//       ],
//     },
//   },
// ]

module.exports = {
  entry: './src/js/index.js',
  output: {
    // filename: 'js/build.js',
    // path: resolve(__dirname, 'build'),
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build'),
    publicPath: '/',
    chuckFilename: 'js/[name].[contenthash:10]_chuck.js',
  },
  stats: { children: false },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader],
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        enforce: 'pre',
        options: {
          fix: true, //自动修复
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage', // 按需加载
                corejs: {
                  version: 3,
                },
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17',
                },
              },
            ],
          ],
        },
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 4 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,
          // publicPath: '/imgs',
          outputPath: 'imgs',
        },

        // 　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      },
      {
        //处理html文件中的图片问题
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'font',
          name: '[hash:10].[ext]',
        },
      },
    ],
    // rules: [
    //   {
    //     test: /\.css$/,
    //     use: ['style-loader', 'css-loader'],
    //   },
    //   {
    //     test: /\.js$/,
    //     exclude: /node_modules/,
    //     include: resolve(__dirname, 'src'),
    //     loader: 'eslint-loader',
    //     enforce: 'pre',
    //     options: {
    //       fix: true, //自动修复
    //     },
    //   },
    //   { oneOf: [] },
    // ],
  },
  plugins: [
    // 提取css
    new MiniCssExtractPlugin({
      filename: 'css/built.css',
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin(),
    // 打包html
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true, // 处理空格
        removeComments: true, //移除注释
      },
    }),
  ],
  mode: 'production',
  devtool: 'source-map',
  resolve: {
    // 快捷路径
    alias: {
      $css: resolve(__dirname, 'src/css'),
    },
    // 省略后缀
    extensions: ['.js', '.json', '.css'],
    // 告诉 webpack 解析模块
    modules: [resolve(__dirname, '../webpack4/node_modules'), 'node_modules'],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      /*  
         默认配置
      */
      // minSize: 30 * 1024,
      // maxSize: 0, //最大没有限制
      // minChunks: 1, //要提取的chunk最少被引用1次
      // maxAsyncRequests: 5, //按需加载时并行加载的文件最大数量
      // maxInitialRequest: 3, //入口js文件的最大并行请求数量
      // automaticNameDelimiter: '~', //命名连接符
      // name: true, // 可以使用命名规则
      // cacheGroups: {
      //   // 分割chunk组
      //   //  node_modules 文件会被打包到 vendors 组的chunk 中
      //   // 大小若超过30kb,至少被引用一次
      //   vendors: {
      //     test: /[\\/]node_module[\\/]/,
      //     // 优先级
      //     priority: -10,
      //   },
      //   default: {
      //     // 要提取的chunk最少被引用2次
      //     minChunks: 2,
      //     // 优先级
      //     priority: -20,
      //     //  如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包
      //     reuseExistingChunk: true,
      //   },
      // },
    },
    //  将当前模块的记录其他模块的hash单独打包成一个文件 runtime
    //  解决：修改a文件导致b 文件的 contenthash 变化
    runtimeChunk: {
      name: (entrypoint) => `runtime-${entrypoint.name}`,
    },
    minimizer: [
      //  配置生产环境的压缩方案 ：js/css
      new TerserWebpackPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动 source-map
        sourceMap: true,
      }),
    ],
  },
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    // 监视 contentBase 所有文件，一旦变化就会reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件
      ignored: /node_module/,
    },
    compress: true,
    port: 5000,
    open: true,
    hot: true,
    //  不要显示启动日志
    clientLogLevel: 'none',
    // 除了启动信息，其他不要显示
    quiet: true,
    // 关闭全屏提示
    overlay: false,
    // 服务代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求是，路径重写 --->   /api/xxx  --->  /xxx (去掉api)
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
}
